import React, { useState, useEffect } from 'react'
import { Card, Row, Col, Button, Form, Input, Table, Pagination, Modal, Tooltip, message } from 'antd';
import { SearchOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
import type { ColumnsType } from 'antd/es/table';
import type { TableRowSelection } from 'antd/es/table/interface';
import { reqHospitalSetList, reqDeleteHospital, reqDeleteGroupHospitals } from '@api/hospital/hospitalSet'
import { HospitalSetList } from '@api/hospital/model/hospitalSetTypes'
import './HospitalSet.less'
import { useNavigate } from 'react-router-dom';
export default function HospitalSet() {
  const columns: ColumnsType<any> = [
    {
      title: '序号',
      render(value, row, index) {
        return index + 1
      }
    },
    {
      title: '医院名称',
      dataIndex: 'hosname',
    },
    {
      title: 'api基础路径',
      dataIndex: 'apiUrl',
    },
    {
      title: '签名',
      dataIndex: 'signKey',
    },
    {
      title: '联系人姓名',
      dataIndex: 'contactsName',
    },
    {
      title: '联系人手机',
      dataIndex: 'contactsPhone',
    },
    {
      title: '操作',
      render: (records) => {
        return (
          <>
            <Tooltip placement="top" title={'修改医院'}>
              <Button type="primary" size="small" icon={<EditOutlined />} onClick={() => editHospital(records)}></Button>
            </Tooltip>
            <Tooltip placement="top" title={'删除医院'}>
              <Button danger type="primary" size="small" icon={<DeleteOutlined />} className='ml' onClick={deleteHospital(records)}></Button>
            </Tooltip>
          </>
        )
      },
      width: 100,
      fixed: 'right'
    }
  ]
  const [hosname, setHosname] = useState<string>()
  const [hoscode, setHoscode] = useState<string>()
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
  const [total, setTotal] = useState(0);
  const [pageSize, setPageSize] = useState(5)
  const [current, setCurrent] = useState(1)
  const [hospitalList, setHospitalList] = useState<HospitalSetList>([])
  const [form] = Form.useForm()
  const [loading, setLoading] = useState<boolean>(false)

  useEffect(() => {
    getHospitalSetList(current, pageSize, hosname, hoscode)
    console.log('HospitalSet挂载了')
  }, [current, pageSize, hoscode, hosname])

  const deleteHospital = (records: any) => {
    return () => {
      console.log('records', records)
      Modal.confirm({
        content: `您确认要删除${records.hosname}数据吗？`,
        async onOk() {
          await reqDeleteHospital(records.id)
          message.success('删除医院成功')
          getHospitalSetList(current, pageSize, hosname, hoscode)
        }
      })
    }
  }

  // 修改医院
  const editHospital = (records: any) => {
    // return () => {
    console.log('records', records)
    const { id } = records
    navigate(`/syt/hospital/addorupdateHospital/edit/${id}`)
    // }
  }

  const getHospitalSetList = async (current: number, pageSize: number, hosname?: string, hoscode?: string) => {
    setLoading(true)
    console.log('hosname', hosname)
    console.log('hoscode', hoscode)
    const res = await reqHospitalSetList({
      page: current,
      limit: pageSize,
      hosname,
      hoscode
    })
    setLoading(false)
    console.log('res', res)
    setTotal(res.total)
    setHospitalList(res.records)
  }

  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    console.log('selectedRowKeys changed: ', newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };

  const rowSelection: TableRowSelection<any> = {
    type: 'checkbox',
    selectedRowKeys,
    onChange: onSelectChange,
  };
  // 查询
  const onFinish = (value: any) => {
    console.log('value', value)
    const { hospitalNumber, hospitalName } = value
    setHoscode(hospitalNumber)
    setHosname(hospitalName)
    setCurrent(1)
  }

  // 清空
  const clearAll = () => {
    form.resetFields()
    setHoscode(undefined)
    setHosname(undefined)
    setCurrent(1)
    setPageSize(5)
  }

  // 批量删除
  const deleteGroup = () => {
    Modal.confirm({
      content: '您确认要删除所有选中的数据吗？',
      okText: '确认',
      cancelText: '取消',
      async onOk() {
        console.log('selectedRowKeys', selectedRowKeys)
        await reqDeleteGroupHospitals(selectedRowKeys)
        message.success("批量删除医院成功")
        setSelectedRowKeys([])
        getHospitalSetList(current, pageSize, hosname, hoscode)
      }
    })
  }
  const navigate = useNavigate()
  // 添加医院
  const addHospitalHandler = () => {
    navigate('/syt/hospital/addorupdateHospital')
  }

  return (
    <Card>
      <Form
        name="basic"
        // initialValues={{ remember: true }}
        onFinish={onFinish}
        autoComplete="off"
        layout='inline'
        form={form}
      >
        <Form.Item
          name="hospitalName"
          wrapperCol={{ span: 26 }}
        >
          <Input placeholder='医院名称' />
        </Form.Item>

        <Form.Item
          name="hospitalNumber"
          wrapperCol={{ span: 26 }}
        >
          <Input placeholder='医院编号' />
        </Form.Item>

        <Form.Item>
          <Button icon={<SearchOutlined />} type="primary" htmlType="submit">
            查询
          </Button>
        </Form.Item>
        <Form.Item>
          <Button onClick={clearAll} disabled={!hoscode && !hosname}>
            清空
          </Button>
        </Form.Item>
      </Form>
      <Row className='mtb'>
        <Col>
          <Button type="primary" style={{ marginRight: '10px' }} onClick={addHospitalHandler}>
            添加
          </Button>
        </Col>
        <Col>
          <Button danger type="primary" disabled={!selectedRowKeys.length} onClick={deleteGroup} >
            批量删除
          </Button>
        </Col>
      </Row>
      <Table
        columns={columns}
        bordered
        rowKey="id"
        scroll={{ x: '1000px', y: 'calc(100vh - 388px)' }}
        dataSource={hospitalList}
        rowSelection={rowSelection}
        pagination={false}
        className='mb'
        size='middle'
        loading={loading}
      />
      <Row justify="end">
        <Col>
          <Pagination
            total={total}
            showSizeChanger
            showQuickJumper
            showTotal={total => `共 ${total} 项数据`}
            pageSizeOptions={[5, 10, 15, 20]}
            pageSize={pageSize}
            current={current}
            onChange={(page, pageSize) => {
              // getHospitalSetList(page, pageSize)
              setCurrent(page)
              setPageSize(pageSize)
            }}
          />
        </Col>
      </Row>
    </Card>
  )
}
